<template>
  <template v-for="(item, cKey) of types" :key="cKey">
    <div
      class="ant-notification"
      :class="`ant-notification-${cKey}`"
      :style="getStyle(cKey)"
    >
      <span>
        <Notification
          v-for="noti of item"
          :key="noti.key"
          :config="noti"
          @end="end"
        >
        </Notification>
      </span>
    </div>
  </template>
</template>
<script>
import Notification from "./notification";
export default {
  props: {
    defaults: Object,
  },
  components: {
    Notification,
  },
  data() {
    return {
      types: {
        topRight: {},
        topLeft: {},
        bottomRight: {},
        bottomLeft: {},
      },
    };
  },
  methods: {
    end(key) {
      for (let item in this.types) {
        if (this.types[item][key]) {
          delete this.types[item][key];
        }
      }
    },
    add(config) {
      this.maxCount(config.placement);
      if (config.type == "close") {
        this.close(config.key);
      } else {
        this.types[config.placement][config.key] = config;
      }
    },
    close(key) {
      for (let item in this.types) {
        if (this.types[item][key]) {
          this.types[item][key].duration = -1;
        }
      }
    },
    getStyle(type) {
      let style;
      if (type == "topRight" || type == "topLeft") {
        style = {
          top: this.defaults.top,
          bottom: "auto",
        };
        const key = type == "topRight" ? "right" : "left";
        style[key] = "0px";
      } else {
        style = {
          bottom: this.defaults.bottom,
          top: "auto",
        };
        const key = type == "bottomRight" ? "right" : "left";
        style[key] = "0px";
      }
      return style;
    },
    maxCount(type) {
      console.log(type);
      const list = Object.keys(this.types[type]);
      const length = list.length;
      if (this.defaults.maxCount && length >= this.defaults.maxCount) {
        list.forEach((key, index) => {
          //5 显示2个，删除0-3
          if (index <= length - this.defaults.maxCount) {
            this.types[type][key].duration = -1;
          }
        });
      }
    },
  },
  mounted() {
    // this.types[this.config.config.placement][this.config.config.key]=this.config.config
    // console.log(this.config.config)
  },
};
</script>
<style lang="stylus" scoped>
.ant-notification {
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  line-height: 1.5715;
  font-feature-settings: 'tnum';
  position: fixed;
  z-index: 1010;
  width: 384px;
  max-width: calc(100vw - 32px);
  padding: 0px;
  font-variant: tabular-nums;
  list-style: none;
  margin: 0px 24px 0px 0px;
}

.ant-notification-bottomLeft, .ant-notification-topLeft {
  margin-right: 0px;
  margin-left: 24px;
}
</style>